<template>
    <div class="joinUs">
        <div class="hdBtn">
            <el-button type="warning" plain icon="Close" @click="handleClose">关闭</el-button>
        </div>

        <div class="generateCode">
            <el-row>
                <el-col :span="18">
                    <b>生成邀请二维码</b>
                    <p style="margin-bottom: 20px;">可通过以下微信扫描二维码的方式邀请成员加入,成员申请后需管理员审核。<span>当前邀请码有效期为{{ term() }}</span></p>
                    <p>设置邀请码的有效期</p>

                    <el-row>
                        <el-col :span="4">
                            <el-select v-model="expirationTime" placeholder="请选择有效期">
                                <el-option v-for="item in expirationData" :key="item.value" :label="item.label"
                                    :value="item.value" />
                            </el-select>

                        </el-col>
                        <el-col :span="3">
                            <el-button style="margin-left: 10px;" :icon="Refresh" type="primary">生成新二维码 </el-button>
                        </el-col>
                    </el-row>
                </el-col>
                <el-col align="right" :span="6">
                    <div class="desCode">
                        <el-icon><CircleClose /></el-icon>作废当前二维码
                    </div>
                </el-col>
            </el-row>
        </div>

        <div class="shareCode">
            <div class="header">分享二维码邀请加入</div>
            <div class="content">
                <div class="codeOut">
                    <div class="title">
                        <span>新视觉邀请你加入</span>
                        <p>新视觉数码实训基地</p>
                    </div>
                    <div class="code">
                        <img src="@/assets/images/code.png" alt="">
                        <p>扫一扫上面的二维码加入我们</p>
                    </div>

                </div>

            </div>

        </div>



    </div>
</template>

<script setup>
import { ref } from "vue"
import { Refresh } from '@element-plus/icons-vue'
import { parseTime } from "@/utils/ruoyi.js"

const term = () => {

    return parseTime(new Date().getTime() + 259200000)
}
const { proxy } = getCurrentInstance();
const route = useRoute()
const router = useRouter()
const expirationTime = ref("3天")
const expirationData = ref([
    {
        value: '3',
        label: '3天',
    },
    {
        value: '5',
        label: '5天',
    },
    {
        value: '7',
        label: '7天',
    }
])
// 关闭当前也弥漫返回班级页面
const handleClose = () => {
    proxy.$tab.closePage(route).then(res => {
        router.go(-1)
    })
}
</script>

<style lang="scss" scoped>
.hdBtn {
    margin: 30px 0;
}

.generateCode {
    width: 100%;
    min-height: 150px;
    background: #F2F4F8;
    border-radius: 15px;
    padding: 30px 20px;
    b{
        display: block;
        margin-bottom: 20px;
    }
    p{
        line-height: 1.8em;
        color:#666;
    }
    span{
        color: #5DB1FF;
    }
}

.shareCode {
    margin-top: 30px;

    .header {
        width: 100%;
        height: 60px;
        background: #E7EAF1;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .content {
        width: 100%;
        min-height: 500px;
        background: #F2F4F8;
        display: flex;
        justify-content: center;
        align-items: center;
        .codeOut{
            width: 300px;
            height: 350px;
            background: #fff;
            border-radius: 10px;
            .title{
                height: 100px;
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                border-bottom: 1px solid #DDDDDD;
                span{
                    color: #999;
                    font-size: 12px;
                }
                p{
                    line-height: 1em;
                    margin-top: 20px;
                }
            }
            .code{
                height: 250px;
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                p{
                    color: #999;
                    font-size: 12px;
                    margin-top: 20px;
                }
            }
        }

    }
}

.desCode{
        display: flex;
        justify-content: right;
        align-items: center;
        color: #1890FF;
        font-size: 14px;
        cursor: pointer;
    }
</style>